<template>
	<view class="collectionContent">
		<!-- <header-box :title="pageTitle" :isShare="true"></header-box> -->
		<view class="collectionDetail-box" v-if="collectionData">
			<view class="lighting-bg"><image class="lighting-bg-img" src="../../static/img/lighting-bg.png" mode=""></image></view>
			<!-- 放3d图 -->
			<view class="auctionDetail-3d-content" v-if="collectionData.objModel">
				<view class="auctionDetail-3d-content-model">
					<model-obj
						:src="collectionData.objModel"
						:mtl="collectionData.mtlModel"
						:rotation="rotation"
						@on-load="onLoading"
						backgroundColor="rgba(22,24,29,0)"
						:backgroundAlpha="0"
						:controlsOptions="{
						  enableZoom
						}"
					></model-obj>
				</view>
			</view>
			<!-- 图片模式 -->
			<view class="collectionDetail-img-model" v-else>
				<view class="collectionDetail-img-model-box">
					<view class="_img-model">
						<view class="_img-model-box">
							<image class="_img-model-bg" src="../../static/img/collection-bg.png" mode=""></image>
							<view class="_img-model-content">
								<image class="_img-model-content_img noSaveImg" :src="collectionData.img" mode=""></image>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 3d图的底座 -->
			<view class="auctionDetail-3d-bottom">
				<view class="auctionDetail-3d-bottom-box">
					<image class="auctionDetail-3d-bottom-img" src="../../static/img/3d-bottom-icon.png" mode=""></image>
					<view class="auctionDetail-info">
						<view class="auctionDetail-info-title"><text>{{collectionData.name}}</text></view>
						<view class="auctionDetail-info-main">
							<text class="_info-main-l">{{collectionData.level == 1?'普通':collectionData.level == 2?'稀有':'传说'}}</text>
							<text class="_info-main-r"><text class="_info-main-r-text">剩余</text><text class="_info-main-r-num">{{collectionData.currentNum}}份</text></text>
						</view>
					</view>
				</view>
			</view>
			<view class="auctionDetail-main">
				<view class="auctionDetail-main-box">
					<view class="auctionDetail-price">
						<text class="auctionDetail-price-num">{{collectionData.price}}积分</text>
					</view>
					<view class="auctionDetail-business">
						<view class="auctionDetail-business-item">
							<text class="auctionDetail-business-item-label">发行方：</text>
							<text class="auctionDetail-business-item-val">{{collectionData.issuer}}</text>
						</view>
						<view class="auctionDetail-business-item auctionDetail-business-item-top">
							<text class="auctionDetail-business-item-label">品牌方：</text>
							<text class="auctionDetail-business-item-val">{{collectionData.brand}}</text>
						</view>
					</view>
					
					<view class="auctionDetail-main-chunk">
						<view class="auctionDetail-main-chunk-header"><text>作品详情</text></view>
						<view class="auctionDetail-main-chunk-content">
							<view class="auctionDetail-main-chunk-content-box">
								<text>{{collectionData.description}}</text>
								<!-- <view class="auctionDetail-main-chunk-content-box-img">
									<image class="auctionDetail-main-chunk-content-box-img_img"  src="../../static/img/goods-img.png" mode=""></image>
								</view>
								<text class="auctionDetail-main-chunk-content-box-txt">这里可以介绍作品，图文介绍，如果暂时没有请忽略。这里可以介绍作品，图文介绍，如果暂时没有请忽略。</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="page-footer" :class="!pageFooterFlag?'page-footer-bottom':''">
				<view class="page-footer-box">
					<view class="page-footer-box-l">
						<view class="page-footer-box-l-label"><text>剩余积分</text></view>
						<view class="page-footer-box-l-val"><text>{{(userInfo && userInfo.integral)?userInfo.integral:0}}</text></view>
					</view>
					<view class="page-footer-box-r">
						<view class="page-footer-box-r-btn page-footer-box-r-btn-r">
							<text class="page-footer-box-r-btn-r-number" @click="exChangeCollection">{{collectionData.price}}积分兑换</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<u-popup :show="tipsShow" :round="20" mode="center" :overlayOpacity="0.8" @close="tipsPopupClose" @open="tipsPopupOpen" bgColor="transparent">
			<view class="tipsPopup">
				<view class="tipsPopup-icon"><image class="tipsPopup-icon-img" src="../../static/img/careful-icon.png" mode=""></image></view>
				<view class="tipsPopup-title"><text>购买前查阅</text></view>
				<view class="tipsPopup-text"><text>付款后商品自动上链，不可退换</text></view>
				<view class="tipsPopup-confirm" @click="toPay"><text>我已知悉</text></view>
			</view>
		</u-popup>
		
		<!-- 弹窗 -->
		<u-popup :show="successShow" :round="20" mode="center" :overlayOpacity="0.8" @close="successPopupClose" @open="successPopupOpen" bgColor="transparent">
			<view class="tipsPopup">
				<view class="tipsPopup-icon">
					<image class="tipsPopup-icon-img" src="../../static/img/success-icon.png" mode=""></image>
				</view>
				<view class="tipsPopup-text"><text>兑换成功</text></view>
				<view class="tipsPopup-confirm" @click="confirmOk"><text>知道啦</text></view>
				<image class="cancel-icon" @click="successShow = false" src="../../static/img/cancel-icon.png" mode=""></image>
			</view>
		</u-popup>
		

	</view>
</template>

<script>
	import { ModelObj } from 'vue-3d-model'
	export default {
		data() {
			return {
				pageTitle:'藏品详情',
				pageFooterFlag:true,
				pageScrollTimer:null,
				pageFooterFlag:true,
				tipsShow:false,
				rotation: {
					x: 0,
					y: 0,
					z: 0
				},
				enableZoom:false,
				collectionId:'',
				collectionData:null,
				userInfo:null,
				successShow:false,
				token:'',
			};
		},
		components: {
			ModelObj
		},
		onLoad(option) {
			if (option.collectionId) {
				this.collectionId = option.collectionId;
				this.getCollectionDetail()
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token') || null;
			this.userInfo = uni.getStorageSync('userInfo') || null;
		},
		methods:{
			tipsPopupOpen() {
				this.tipsShow = true;
			},
			tipsPopupClose() {
				this.tipsShow = false
				// console.log('close');
			},
			toPay() {
				// type 2 拍卖
				uni.navigateTo({
					url:'/pages/cashier/cashier?type=2'
				})
			},
			exChangeCollection() {
				if (this.token) {
					if (this.userInfo.integral>=this.collectionData.price) {
						this.$api.getRedeem({collectionId:this.collectionData.collectionId}).then(res => {
							console.log(res)
							if (res.code == 200) {
								this.getUserInfo()
								this.successShow = true;
							}
						})
					} else {
						uni.showToast({
							title:'您的积分不足',
							icon:'none'
						})
					}
				} else {
					this.checkLogin(`/pages/collectionContent/collectionContent?collectionId=${this.collectionId}`)
				}
			},
			confirmOk() {
				this.successShow = false;
			},
			onLoading () {
				// 是否旋转
				this.rotate();
			},
			rotate () {
				this.rotation.y += 0.01;
				requestAnimationFrame( this.rotate );
			},
			getCollectionDetail() {
				this.$api.getCollectionDetail({collectionId:this.collectionId}).then(res => {
					console.log(res)
					if (res.code == 200){
						if (res.data.objModel) {
							let objModel = res.data.objModel;
							res.data.mtlModel = objModel.substr(0,objModel.length-3) + 'mtl';
						}
						this.collectionData = res.data;
					}
				})
			},
			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					// console.log(res)
					if (res.code == 200) {
						uni.setStorageSync('userInfo',res.data)
						this.userInfo = res.data;
					}
				})
			}
		},
		onPageScroll(e) {
			clearTimeout(this.pageScrollTimer) // 每次滚动前 清除一次
			this.pageFooterFlag = false;  
			this.pageScrollTimer = setTimeout(() => { 
				// console.log('滚动结束了');
				this.pageFooterFlag = true; 
			}, 500);
		},
	}
</script>

<style lang="less">
	.collectionContent{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		position: relative;
		display: flow-root;
		.lighting-bg{
			width: 100%;
			height: 422rpx;
			position: absolute;
			top: 0;
			z-index: 0;
			.lighting-bg-img{
				width: 100%;
				height: 100%;
			}
		}
		.collectionDetail-box{
			width: 100%;
			padding-bottom: 152rpx;
			display: flow-root;
		}

		.auctionDetail-3d-content{
			// width: 100%;
			// height: 636rpx;
			// position: relative;
			// background-color: #16181D;
			width: 440rpx;
			height: 440rpx;
			margin: 320rpx auto 0;
			position: relative;
			.auctionDetail-3d-content-model{
				position: absolute;
				width: 100%;
				height: 100%;
				// height: 756rpx;
				background-color: rgba(0,0,0,0);
				// top: 120rpx;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 1;
			}
		}
		.collectionDetail-img-model{
			width:100%;
			height: 636rpx;
			.collectionDetail-img-model-box{
				width:606rpx;
				height:606rpx;
				margin: 0 auto;
				position: relative;
			}
			._img-model{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 70rpx;
				z-index: 1;
				._img-model-box{
					width: 100%;
					height: 100%;
					position: relative;
					overflow: hidden;
					border-radius: 20rpx;
				}
				._img-model-bg{
					width: 100%;
					height: 100%;
				}
				._img-model-content{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					padding: 14rpx;
					._img-model-content_img{
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}
		}
		.auctionDetail-3d-bottom{
			width: 100%;
			.auctionDetail-3d-bottom-box{
				display: block;
				width: 592rpx;
				height: 340rpx;
				margin: 0 auto;
				position: relative;
				.auctionDetail-3d-bottom-img{
					width: 100%;
					height: 100%;
				}
				.auctionDetail-info{
					width: 100%;
					height: 50%;
					position: absolute;
					bottom: 0;
					.auctionDetail-info-title{
						font-size: 40rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						margin-top: 10rpx;
					}
					.auctionDetail-info-main{
						display: flex;
						flex-wrap: nowrap;
						justify-content: center;
						align-items: center;
						margin-top: 16rpx;
						._info-main-l{
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							padding: 8rpx 20rpx;
							background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
							border-radius: 50rpx;
							margin-right: 8rpx;
						}
						._info-main-r{
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							margin-left: 8rpx;
							._info-main-r-text{
								background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
								border-top-left-radius: 50rpx;
								border-bottom-left-radius: 50rpx;
								padding: 8rpx 20rpx;
							}
							._info-main-r-num{
								background: #3C4456;
								border-top-right-radius: 50rpx;
								border-bottom-right-radius: 50rpx;
								padding: 8rpx 20rpx;
							}
						}
					}
				}
			}
		}
		.auctionDetail-main{
			width: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 10rpx;
			.auctionDetail-main-box{
				width: 100%;
				.auctionDetail-price{			
					text-align: center;
					.auctionDetail-price-num{
						font-size: 60rpx;
						font-weight: 500;
						color: #A06AF9;
					}
				}
				.auctionDetail-business{
					width: 100%;
					padding: 32rpx 48rpx;
					background: #262A34;
					border-radius: 24rpx;
					margin-top: 68rpx;
					.auctionDetail-business-item{
						font-size: 28rpx;
						font-weight: 400;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						.auctionDetail-business-item-label{	
							color: #5D5F7A;
						}
						.auctionDetail-business-item-val{
							color: #ffffff;
						}
					}
					.auctionDetail-business-item-top{
						margin-top: 16rpx;
					}
				}
				.auctionDetail-main-chunk{
					width: 100%;
					margin-top: 48rpx;
					.auctionDetail-main-chunk-header{
						font-size: 36rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
					.auctionDetail-main-chunk-content{
						margin-top: 16rpx;
						width: 100%;
						// height: 844rpx;
						background: #262A34;
						border-radius: 24rpx;
						padding: 48rpx;
						box-sizing: border-box;
						.auctionDetail-main-chunk-content-box{
							width: 100%;
							height: 100%;
							// display: flex;
							// justify-content: center;
							// flex-direction: column;
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(255,255,255,0.7);
							.auctionDetail-main-chunk-content-box-img{
								width: 590rpx;
								height: 590rpx;
								background-color: #16181D;
								text-align: center;
								align-items: center;
								border-radius: 12px;
								.auctionDetail-main-chunk-content-box-img_img{
								width: 532rpx;
								height: 532rpx;	
								margin-top: 38rpx;
								}	
							}
							.auctionDetail-main-chunk-content-box-txt{
								display: block;
								padding-top: 32rpx;
								width: 590rpx;
								min-height: 126rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 42rpx;
							}
						}
					}
				}

			}
		}
		.page-footer{
			width: 100%;
			height: 152rpx;
			background: #202227;
			filter: blur(0px);
			position: fixed;
			bottom: 0;
			left: 0;
			transition: all 0.5s linear;
			.page-footer-box{
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 32rpx;
				box-sizing: border-box;
				.page-footer-box-l{
					flex: 1;
					.page-footer-box-l-label{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(255,255,255,0.59);
						margin-top: 6rpx;
					}
					.page-footer-box-l-val{
						font-size: 32rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.page-footer-box-r{
					width: 512rpx;
					height: 88rpx;
					display: flex;
					flex-wrap: nowrap;
					justify-content: flex-end;	
					.page-footer-box-r-btn{
						border-radius: 45rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
						width: 248rpx;
					}
					.page-footer-box-r-btn-l{
						background: linear-gradient(228deg, #F0B04D 0%, #F28348 100%);
						line-height: 88rpx;
					}
					.page-footer-box-r-btn-r{
						background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
						display: flex;
						flex-direction: column;
						justify-content: center;
						.page-footer-box-r-btn-r-number{
							font-size: 32rpx;
						}
					}
				}
			}
		}
		.page-footer-bottom{
			bottom: -152rpx;
		}
	}
	.tipsPopup{
		width: 590rpx;
		height: 610rpx;
		// background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
		background: #262A34;
		border-radius: 40rpx;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		.tipsPopup-icon{
			width: 200rpx;
			height: 200rpx;
			margin: 68rpx auto 24rpx;
			.tipsPopup-icon-img{
				width: 100%;
				height: 100%;
			}
		}
		.tipsPopup-title{
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
		.tipsPopup-text{
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255,255,255,0.8);
			text-align: center;
			margin-top: 44rpx;
		}
		.tipsPopup-confirm{
			width: 328rpx;
			height: 88rpx;
			margin: 68rpx auto 0;
			border-radius: 45rpx;
			// background-color: #ffffff;
			font-size: 32rpx;
			font-weight: 500;
			// color: #6A47F1;
			color: #ffffff;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			line-height: 88rpx;
			text-align: center;
		}
		.cancel-icon{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 40rpx;
			right: 48rpx;
		}
	}

</style>
